import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtForm ,AtInput ,AtTextarea} from 'taro-ui'

import "./strictInfo.scss"
import {api_identity} from '../../../utils/api.jsx'


export default class StrictInfo extends Component {

  constructor(props){
    super(props);
    this.state = {
      name:'',
      id_card:'',
      case_history:'',
      namePlach:'请输入姓名',
      idPlach:'请输入18位身份证号码',
      casePlach:'你过往的病例',
      getting:false
    }
  }

  toNextPage = () => {
    const bindFlag = Taro.getStorageSync('bindFlag')    
    if(bindFlag.bindFlag){
      Taro.navigateTo({url: '/pages/pagesB/login/login'})
    }else{
      Taro.redirectTo({url: '/pages/pagesB/strictInfo/strictInfo'})
    }
  }

  // 发送数据并请求结果
  request = async () => {
    const user=Taro.getStorageSync('userInfo')
    const params = {
      url: api_identity,
      data: {
        phone:user.userPhone,
        patient_name:this.state.name,
        id_card:this.state.id_card,
        case_history:this.state.case_history
      },
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success: (res) => {Taro.setStorageSync('is_identity_ok',res.data)
    },
      fail: (res) => {console.log(res.data)}
    }

    var reg =/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

    if(this.state.name.length == 0){
      Taro.showToast({
        title: '请输入姓名',
        icon: 'none',
        duration: 2000
      })
    }else if(this.state.id_card.length == 0){
      Taro.showToast({
        title: '请输入身份证号码',
        icon: 'none',
        duration: 2000
      })
    }else if(!reg.test(this.state.id_card)){
      Taro.showToast({
        title: '身份证号码格式错误',
        icon: 'none',
        duration: 2000
      })
    }else{  // 输入无误，发送请求
      await Taro.request(params)
      const is_identity_ok = Taro.getStorageSync('is_identity_ok')
      if(is_identity_ok){
        // 保存用户的身份信息,下次进来自动填写进去
        Taro.setStorage({
          key:"plachInfo",
          data:{
            namePlach:this.state.name,
            idPlach:this.state.id_card,
            casePlach:this.state.case_history
          }
        })
        Taro.showToast({
          title: '保存成功',
          icon: 'success',
          duration: 1000
        })
        setTimeout(this.toNextPage,1000)
      }else{
        Taro.showToast({
          title: '保存失败',
          icon: 'none',
          duration: 2000
        })
      }
    }
  }

  checkInfo = async () => {
    const plachInfo = Taro.getStorageSync('plachInfo')    
    if(plachInfo != ''){
      this.setState({
        namePlach:plachInfo.namePlach,
        idPlach:plachInfo.idPlach,
        casePlach:plachInfo.casePlach,
        getting:true
      })
    }
  }

  render () {
    if(!this.state.getting){
      this.checkInfo()
    }
    
    return (
      <View>
        <AtForm>
          <AtInput className='strictName'
            name='strictName'
            border={true}
            title='姓名'
            type='text'
            required='true'
            placeholder={this.state.namePlach}
            value={this.state.name}
            onChange={(e) =>this.setState({name:e})}
          >
          </AtInput>
          <AtInput className='id_card'
            name='id_card'
            title='身份证'
            type='idcard'
            required='true'
            border='true'
            placeholder={this.state.idPlach}
            value={this.state.id_card}
            onChange={(e) =>this.setState({id_card:e})}
          >
          </AtInput>
          <AtTextarea className='case_history'
            maxLength={200}
            height={200}
            required='true'
            placeholder={this.state.casePlach}
            count={true}
            value={this.state.case_history}
            onChange={(e) =>this.setState({case_history:e})}
          />
          <button className='verifyBtn' type='primary' onClick={this.request}>保存</button>
        </AtForm>
      </View>
    )
  }
}